<template>
  <div>
    <div>TimeToolBar:{{timeRange | timeRange}}</div>

    <button type="button" @click="offsetRange(-1)">《</button>
    <button type="button" @click="offsetRange(1)">》</button>

    <button type="button" @click="handleRangeButtonClick('day')">日</button>
    <button type="button" @click="handleRangeButtonClick('week')">星期</button>
    <button type="button" @click="handleRangeButtonClick('month')">月</button>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'TimeToolBar',
  data () {
    return {
      timeRange: this.getDayRange(new Date().getTime())
    }
  },
  watch: {
    timeRange: {
      handler: function (val, oldVal) {
        this.$emit('timeRangeChange', val)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getDayRange (time, offsetValue = 0) {
      var now = moment(time).format('YYYY-MM-DD')
      var startMoment = moment(now + ' 00:00').add(offsetValue, 'days')
      var endMoment = moment(now + ' 00:00').add(offsetValue + 1, 'days')
      return {
        duration: 'day',
        start: startMoment.valueOf(),
        end: endMoment.valueOf()
      }
    },
    getWeekRange (time, offsetValue = 0) {
      var now = moment(time).format('YYYY-WW')
      var startMoment = moment(now + '-1 00:00', 'YYYY-WW-E HH:mm').add(offsetValue, 'weeks')
      var endMoment = moment(now + '-1 00:00', 'YYYY-WW-E HH:mm').add(offsetValue + 1, 'weeks')
      return {
        duration: 'week',
        start: startMoment.valueOf(),
        end: endMoment.valueOf()
      }
    },
    getMonthRange (time, offsetValue = 0) {
      var now = moment(time).format('YYYY-MM')
      var startMoment = moment(now + '-01 00:00').add(offsetValue, 'months')
      var endMoment = moment(now + '-01 00:00').add(offsetValue + 1, 'months')
      return {
        duration: 'month',
        start: startMoment.valueOf(),
        end: endMoment.valueOf()
      }
    },
    offsetRange (offsetValue) {
      var time = this.timeRange.start
      switch (this.timeRange.duration) {
        case 'day':
          this.timeRange = this.getDayRange(time, offsetValue)
          break
        case 'week':
          this.timeRange = this.getWeekRange(time, offsetValue)
          break
        case 'month':
          this.timeRange = this.getMonthRange(time, offsetValue)
          break
        default:
          this.timeRange = this.getDayRange(time, offsetValue)
          break
      }
    },
    handleRangeButtonClick (duration) {
      if (duration !== this.timeRange.duration) {
        var time
        var nowTime = new Date().getTime()
        if (nowTime >= this.timeRange.start && nowTime <= this.timeRange.end) {
          time = nowTime
        } else {
          time = 0.5 * (this.timeRange.start + this.timeRange.end)
        }
        switch (duration) {
          case 'day':
            this.timeRange = this.getDayRange(time)
            break
          case 'week':
            this.timeRange = this.getWeekRange(time)
            break
          case 'month':
            this.timeRange = this.getMonthRange(time)
            break
          default:
            this.timeRange = this.getDayRange(time)
            break
        }
      }
    }
  },
  filters: {
    timeRange (timeRange) {
      switch (timeRange.duration) {
        case 'day':
          return moment(timeRange.start).format('YYYY-MM-DD')
        case 'week':
          return moment(timeRange.start).format('YYYY-MM-DD') + '~' + moment(timeRange.end).format('DD')
        case 'month':
          return moment(timeRange.start).format('YYYY-MM')
        default:
          return moment(timeRange.start).format('YYYY-MM-DD')
      }
    }
  }
}
</script>

<style></style>
